<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div {
        height: 500px;
        width: 500px;
        background: red;
    }
</style>

<body style="height: 2000px"> 
    <!-- <select name="" id="">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select> -->

    <input type="text">
    <script>
        // dom事件
        // 一般指用户和浏览器交互的一瞬间
        // 事件类型 on
        // 元素.on + 事件名称
        // 1.鼠标事件
        // click 单次点击
        // document.querySelector("button").onclick = function () {
        //     console.log(1)
        // }
        // dblclick 双击事件
        // document.querySelector("button").ondblclick = function () {
        //     console.log(1)
        // }

        // mouseover  鼠标划入
        // document.querySelector("div").onmouseover = function () {
        //     console.log("鼠标划入了！！！")
        // }
        // // mouseout  鼠标划出
        // document.querySelector("div").onmouseout = function () {
        //     console.log("鼠标划出了！！！")
        // }
        //  mousemove  鼠标移动
        // document.querySelector("div").onmousemove = function () {
        //     console.log("鼠标了移动了！！！")
        // }
        // mouseenter //鼠标第一次进入触发
        // mouseleave //鼠标第一次离开触发

        // 2.键盘事件
        // keyup 键盘抬起
        // keydown 键盘按下
        // keypress 键盘按下加抬起

        // document.onkeypress = function (e) {
        //     // console.log("键盘按下了")
        //     console.log(e)

        //     if (e.keyCode === 13) {
        //         alert("您按下了回车")
        //     }


        // }

        // 3 表单事件select
        //  change 监听value改变
        // document.querySelector("input").onchange = function () {
        //     console.log("改变了")
        // }
        // document.querySelector("select").onchange = function () {
        //     console.log()
        //     console.log("值变了")
        // }
        // input  用户输入事件

        // document.querySelector("input").oninput = function () {
        //     console.log("用户正在输入")
        // }

        // 4 聚焦事件
        //   focus 焦点事件

        // document.querySelector("input").onfocus = function () {
        //     console.log("聚焦状态")
        // }

        // // blur  非聚焦状态
        //    5 其他的事件
        // load  结束加载

        // scroll 滚东条滚动

        // document.onscroll = function () {
        //     console.log("正在滚动")
        // }






        // document.querySelector("input").onblur = function () {
        //     console.log("非聚焦状态")
        // }
        // 事件对象
        // 
    </script>
</body>

</html>